<template>
  <div class="axiom-data-table-wrapper">
    <el-table
      ref="tableInstance"
      :data="data"
      v-loading="loading"
      style="width: 100%"
      stripe
      border
      :row-key="rowKey"
      table-layout="auto"
      @selection-change="$emit('selection-change', $event)"
    >
      <!-- [新增] 空状态插槽 -->
      <template #empty>
        <slot name="empty">
          <AxiomEmpty />
        </slot>
      </template>

      <!-- Selection Column -->
      <el-table-column
        v-if="columns.some(c => c.type === 'selection')"
        type="selection"
        :width="55"
        align="center"
      />

      <!-- Data Columns -->
      <template v-for="col in columns.filter(c => c.type !== 'selection')" :key="col.prop">
        <!-- Column with Slot -->
        <el-table-column
          v-if="col.slot"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :align="col.align || 'left'"
        >
          <template #default="{ row, column, $index }">
            <slot :name="col.slot" :row="row" :column="column" :index="$index"></slot>
          </template>
        </el-table-column>
        
        <!-- Standard Column -->
        <el-table-column
          v-else
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :align="col.align || 'left'"
        />
      </template>
    </el-table>

    <div v-if="pagination && pagination.total > 0" class="axiom-data-table-pagination">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="$emit('page-change', $event)"
        @size-change="$emit('size-change', $event)"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tableInstance = ref(null);

defineExpose({
  clearSelection: () => {
    if (tableInstance.value) {
      tableInstance.value.clearSelection();
    }
  }
});
</script>

<script>
import * as AxiomComponents from '../common';

export default {
  name: 'AxiomDataTable',
  components: {
    ...AxiomComponents,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    rowKey: {
      type: [String, Function],
      default: 'id',
    },
    pagination: {
      type: Object,
      default: () => ({
        currentPage: 1,
        pageSize: 10,
        total: 0,
      })
    }
  },
  emits: ['page-change', 'size-change', 'selection-change'],
}
</script>

<style lang="scss">
@use '../../styles/components/pc/axiom-data-table';
</style> 